
@radio: m-radio;
@radio-unchecked-color: #C5CFDC;
@radio-checked-color: #3399FF;
@radio-hover-color: #20A0FF;
@radio-disabled-color: #E4E4E4;
@radio-disabled-checked-color: #b1b9c1;


.@{radio}{
    display: inline-block;
    position: relative;
    min-width: 18px;
    margin-right: 10px;
    line-height: 18px;
    font-size: 14px;
    cursor: pointer;

    & input[type=radio]{
        padding: 0;
        margin: 0;
        width: 0;
        height: 0;
        margin-right: 17px;
        cursor: inherit;
        &::before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            width: 18px;
            height: 18px;
            background: #fff;
            border: solid 1px @radio-unchecked-color;
            border-radius: 18px;
            box-sizing: border-box;
            cursor: inherit;
        }
        &::after{
            content: "";
            display: block;
            position: absolute;
            top: 9px;
            left: 9px;
            width: 0px;
            height: 0px;
            border-radius: 12px;
            background: @radio-checked-color;
            transition: all 0.2s ease;
            cursor: inherit;
        }
        &:checked::after{
            top: 3px;
            left: 3px;
            width: 12px;
            height: 12px;
        }
        &:hover::before{
            border-color: @radio-hover-color;
        }
        &:checked::before{
            border-color: @radio-checked-color;
        }
        &:disabled::before{
            border-color: @radio-disabled-color;
            cursor: not-allowed;
        }
        &:checked:disabled::before{
            border-color: @radio-disabled-checked-color;
        }
        &:checked:disabled::after{
            background: @radio-disabled-checked-color;
            cursor: not-allowed;
        }
        &:disabled ~ .m-radio-text{
            color: @radio-disabled-color;
            cursor: not-allowed;
        }
    }
    // .make-radio-theme(info, #9200cc, #9200cc);
}

.make-radio-theme(@theme, @radio-checked-color, @radio-hover-color) {
    &&-@{theme} input[type=radio]::after{
        background: @radio-checked-color;
    }
    &&-@{theme} input[type=radio]:hover::before{
        border-color: @radio-hover-color;
    }
    &&-@{theme} input[type=radio]:checked::before{
        border-color: @radio-checked-color;
    }
}
